<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>

<style>
    #myCanvas {
        margin: 100px auto;
        display: block;
    }

    body {
        background-color: yellowgreen;
    }
</style>

<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>


<script>
    let ctx = document.getElementById("myCanvas").getContext("2d");
    let pi = Math.PI;

    function drawInit() {
        drawBP();
        drawZZ();
        requestAnimationFrame(drawInit);
    }


    function drawZZ() {
        let data = new Date();

        let h = data.getHours();
        let m = data.getMinutes();
        let s = data.getSeconds();

        let sDeg = 360 / 60 * s;
        let mDeg = 360 / 60 * m + sDeg / 60;
        let hDeg = 360 / 12 * h + mDeg / 12;

        drawOne(sDeg, 120, 2, "blue");
        drawOne(mDeg, 100, 4, "yellow");
        drawOne(hDeg, 80, 6, "red");
    }

    function drawOne(rotateDeg, len, lineW, color) {
        ctx.save();
        //移动原点到中心位置
        ctx.translate(150, 150);
        ctx.beginPath();
        ctx.rotate(rotateDeg * pi / 180 - 90 * pi / 180);
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0);
        ctx.lineCap = "round";
        ctx.lineWidth = lineW;
        ctx.strokeStyle = color;
        ctx.stroke();
        ctx.restore();
    }

    function drawBP() {
        ctx.clearRect(0, 0, 300, 300);
        ctx.save();
        //移动原点到中心位置
        ctx.translate(150, 150);
        //绘制60格表盘
        for (let i = 0; i < 60; i++) {
            //保存下原位置
            ctx.save();
            //对x轴做旋转 一个偏移60deg
            ctx.rotate(pi / 180 * 6 * i - pi / 180 * 90);
            //绘画的颜色
            ctx.strokeStyle = i % 5 ? "blue" : "red";
            //绘画线宽
            ctx.lineWidth = i % 5 ? 1 : 2;
            //开始
            ctx.beginPath();
            //绘画线开头
            ctx.moveTo(140, 0);
            //绘画线终点
            ctx.lineTo(110, 0);
            //开始绘画
            ctx.stroke();
            ctx.closePath();

            //书写文字
            if (i % 5 === 0) {
                ctx.beginPath();
                ctx.font = '18';
                ctx.strokeStyle = '#000';
                ctx.strokeText(i / 5 + '', 150, 0);
                ctx.closePath();
            }
            
            //重置绘画
            ctx.restore();
        }


        ctx.restore();
    }


    drawInit();

</script>

</html>